<template>
	<view>
		<nav-header title="搜索结果" :show-right="false">
		</nav-header>
		<view class="search-bar">
			<uni-search-bar v-model="searchContent" radius="100" :focus="true" @confirm="getLists()"
				@cancel="onCancel()" clearButton="auto" cancelButton="none" placeholder="搜索好友/官方群/友商群"></uni-search-bar>
		</view>
		<view class="search-nav">
			<view class="nav">
				<fui-segmented-control :values="values" color="#181D27" activeColor="#2970FF" type="text" height="80"
					size="32" @click="itemClick"></fui-segmented-control>
			</view>
		</view>
		<view class="search-content">
			<view class="content">
				<!-- #ifndef MP-WEIXIN -->
				<up-tag text="友商群" v-if="showTag && listData.group.list && activeIndex == 0"></up-tag>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="tag" v-if="showTag && listData.group.list && activeIndex == 0">
					<text>友商群</text>
				</view>
				<!-- #endif -->
				<UserList v-model="listData.user.list" v-show="activeIndex == 1" :friend-type="0"
					:has-next='hasNext(listData.user.total,listData.user.pageSize-1,listData.user.pageNum)'
					:loading="loadingList.user" @next="loadUser('user',0)" />
				<UserList v-model="listData.businessUser.list" v-show="activeIndex == 3" :friend-type="1"
					:has-next='hasNext(listData.businessUser.total,listData.businessUser.pageSize-1,listData.businessUser.pageNum)'
					:loading="loadingList.businessUser" @next="loadUser('businessUser',1)" />
				<GroupList v-model="listData.group.list" v-show="activeIndex == 0"
					:has-next='hasNext(listData.group.total,listData.group.pageSize-1,listData.group.pageNum)'
					:loading="loadingList.group" @next="loadGroup('group',2)" />
				<GroupList v-model="listData.businessGroup.list" v-show="activeIndex == 2"
					:has-next='hasNext(listData.businessGroup.total,listData.businessGroup.pageSize-1,listData.businessGroup.pageNum)'
					:loading="loadingList.businessGroup" @next="loadGroup('businessGroup',1)" />
				<WorkNumberList v-model="listData.workNumber.list" v-show="activeIndex == 4" :friend-type="0"
					:has-next='hasNext(listData.workNumber.total,listData.workNumber.pageSize-1,listData.workNumber.pageNum)'
					:loading="loadingList.workNumber" @next="loadUser('workNumber',2)" />

			</view>
		</view>
	</view>
</template>

<script>
	import fuiSegmentedControl from "@/components/fui-segmented-control/fui-segmented-control.vue"
	import UserList from './components/UserList'
	import GroupList from './components/GroupList'
	import WorkNumberList from './components/WorkNumberList.vue'
	export default {
		data() {
			return {
				values: ['官方群', '好友', '友商群', '友商', '工作号'],
				activeIndex: 0,
				searchContent: null,
				friend: [],
				guanfang: [],
				busfri: [],
				bqun: [],
				showTag: false,
				loadingList: {
					user: false,
					businessUser: false,
					group: false,
					businessGroup: false,
					workNumber: false,
				},
				listData: {
					user: [],
					businessUser: [],
					group: [],
					businessGroup: [],
					workNumber: []
				}
			}
		},
		components: {
			fuiSegmentedControl,
			UserList,
			GroupList,
			WorkNumberList
		},
		computed: {
			friendType() {
				if (this.activeIndex == 0) {
					return 0
				} else if (this.activeIndex == 2) {
					return 1
				}
				return null
			}

		},
		methods: {
			addGroup(id) {
				this.$http({
					url: "/group/addGroupMemberByGroupId",
					method: "POST",
					data: {
						groupId: id,
						ids: [this.userStore.userInfo.id]
					}
				}).then(() => {
					uni.showToast({
						title: "加入官方群成功",
						icon: "none"
					})
				})
			},
			loadUser(key, type) {
				this.$http({
					url: `/search/user`,
					method: "GET",
					data: {
						content: this.searchContent,
						type: type,
						pageSize: this.listData[key].pageSize || 20,
						pageNum: this.listData[key].pageNum || 1
					}
				}).then((data) => {
					if (!this.listData[key].list) {
						this.listData[key].list = [];
					}
					this.listData[key].list.push(...data.list);
					data.list = this.listData[key].list;
					this.$set(this.listData, key, data);
					this.$set(this.loadingList, key, false);

				})
			},
			loadWorkNumber(key) {

				this.$http({
					url: `/search/workNumber`,
					method: "GET",
					data: {
						content: this.searchContent,
						pageSize: this.listData[key].pageSize || 20,
						pageNum: this.listData[key].pageNum || 1
					}
				}).then((data) => {
					if (!this.listData[key].list) {
						this.listData[key].list = [];
					}
					this.listData[key].list.push(...data.list);
					data.list = this.listData[key].list;

					this.$set(this.listData, key, data);
					this.$set(this.loadingList, key, false);

				})
			},
			loadGroup(key, type) {
				this.$http({
					url: `/search/group`,
					method: "GET",
					data: {
						content: this.searchContent,
						type: type,
						pageSize: this.listData[key].pageSize || 10,
						pageNum: this.listData[key].pageNum || 1
					}
				}).then((data) => {
					data.list = data.list.map(item => {
						let firstFour = item.name.slice(0, 4);
						const lastTwo = firstFour.slice(-2); // 获取前4个字符的最后2个字符
						if (firstFour.length === 4 && ["官", "民", "社", "在"].includes(firstFour.slice(-1))) {
							// 如果最后一个字是“官”，则删除它
							firstFour = firstFour.slice(0, 3);
						}
						if (lastTwo === "村村") {
							firstFour = firstFour.slice(0, 3);
						}
						item.badge = firstFour;
						return item
					})
					if (!this.listData[key].list) {
						this.listData[key].list = [];
					}
					this.listData[key].list.push(...data.list);
					data.list = this.listData[key].list;
					this.$set(this.listData, key, data)
					// 条件判断修正（严格检查是否为空数组）
					if (key === 'group' && this.listData['group'].list.length === 0) {
						console.log('触发赋值逻辑'); // 调试输出
						// this.$set(this.listData['group'], 'list', this.listData['businessGroup'].list)
						this.$set(this.listData, 'group', this.listData['businessGroup'])
						// this.listData.group = this.listData.businessGroup
						console.log("this.listData['group'].list", this.listData['group'])
						this.showTag = true
						// if (this.listData.group.length > 0) {
						// 	this.$set(this.loadingList, key, false);
						// }
					}
					if (key === 'group' && this.listData['group'].list.length > 0) {
						this.showTag = false
						this.listData['group'].list.forEach(item => {
							if (item.groupType == 1) {
								this.showTag = true
							}
						})
						this.$set(this.loadingList, key, false);
					}
					if (key === "businessGroup" && this.listData['group'].list.length > 0) {
						this.$set(this.loadingList, key, false);
						this.loadingList.group = false
					}
				})
			},
			itemClick(e) {
				this.activeIndex = e.index
			},
			onAddFriend(user) {
				this.$http({
					url: `/friend/add?friendId=${user.id}&friendType=${this.friendType}`,
					method: "POST"
				}).then((data) => {
					let friend = {
						id: user.id,
						nickName: user.nickName,
						headImage: user.headImage,
						online: user.online
					}
					this.friendStore.addFriend(friend);
					uni.showToast({
						title: "添加成功，对方已成为您的好友",
						icon: "none"
					})
				})
			},
			onGoUserInfo(id) {
				uni.navigateTo({
					url: `/pageSubOne/common/user-info?id=${id}&friendType=${this.friendType}&fromThis=false&sourceType=${this.friendType}`
				})
			},
			onGoJoin(id) {
				uni.navigateTo({
					url: `/pageSubOne/group/group-join?id=${id}`
				})
			},
			onAddGroup(qun) {
				this.$http({
					url: `/group/applyGroupById`,
					method: "POST",
					data: {
						groupId: qun.id,
						userId: this.userStore.userInfo.id
					}
				}).then((group) => {
					uni.showToast({
						title: "已发起申请，等待群主或管理员通过",
						icon: "none"
					})
				})
			},
			getLists() {
				this.listData = {
					user: [],
					businessUser: [],
					group: [],
					businessGroup: [],
					workNumber: [],
				}
				this.loadingList = {
					user: true,
					businessUser: true,
					group: true,
					businessGroup: true,
					worknumber: true
				}
				this.loadUser('user', 0)
				this.loadUser('businessUser', 1)
				this.loadGroup('businessGroup', 1)
				this.loadGroup('group', 2)
				this.loadWorkNumber('workNumber', 0)
			}
		},
		onLoad(options) {
			this.searchContent = options.context
			this.getLists()
			this.groupStore.loadGroup()
		}
	}
</script>

<style scoped lang="scss">
	.title {
		margin-top: 20rpx;
		text-align: center;
		font-size: 34rpx;
	}

	.none {
		font-weight: 600;
		text-align: center;
		margin-top: 40rpx;
	}

	.search-nav {
		width: 100%;

		.nav {
			padding: 30rpx 0;
		}
	}

	.fc {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.search-content {
		width: 100%;

		.content {
			padding: 0rpx 32rpx;

			.tag {
				background-color: #3c9cff;
				border-width: 1px;
				border-color: #3c9cff;
				height: 26px;
				line-height: 26px;
				font-size: 28rpx;
				padding: 0 10px;
				border-radius: 3px;
				color: #fff;
				border-style: solid;
				width: 88rpx;
			}

			.avr-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16%;
			}
		}
	}
</style>